<template>
  <h2>Page - {{ $store.state.counter }}</h2>
  <h2>Page - {{ sCounter }}</h2>
  <h2>Page - {{ name }}</h2>
  <h2>Page - {{ age }}</h2>
  <h2>Page - {{ sName }}</h2>
  <h2>Page - {{ sAge }}</h2>
</template>

<script>
import { computed } from 'vue'
import { useStore, mapState } from 'vuex'
import { useState } from '../hooks'

export default {
  computed: {
    // ...mapState({
    //   sCounter: (state) => state.counter,
    //   sName: (state) => state.name
    // })
  },
  setup() {
    const store = useStore()
    const sCounter = computed(() => store.state.counter)
    const sName = computed(() => store.state.name)

    const storeStateFns = mapState(['counter', 'name', 'age'])
    let storeState = {}
    Object.keys(storeStateFns).forEach((fnKey) => {
      const fn = storeStateFns[fnKey].bind({ $store: store })
      storeState[fnKey] = computed(fn)
    })

    // 封装的 hooks
    storeState = useState(['counter', 'name', 'age'])
    const storeState2 = useState({
      sName: state => state.name,
      sAge: state => state.age
    })

    return {
      sCounter,
      sName,
      ...storeState,
      ...storeState2
    }
  }
}
</script>

<style scoped></style>
